import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';

/// @Author wywinstonwy
/// @Date 2022/1/23 10:05 上午
/// @Description: 


class MyFlexPage extends StatefulWidget {
  const MyFlexPage({Key? key}) : super(key: key);

  @override
  _MyFlexPageState createState() => _MyFlexPageState();
}

class _MyFlexPageState extends State<MyFlexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar('弹性布局Flex'),
      body: Column(children: [
        Flex(direction: Axis.horizontal,
        children: [
          Expanded(
              flex: 1,
              child: Container(height: 30,color: Colors.red,)),

          Expanded(
              flex: 2,
              child: Container(height: 30,color: Colors.green,)),
        ],),
        Padding(
            padding: EdgeInsets.only(top: 20),
          child: SizedBox(
            height: 100,
            //Flex的三个子widget，再垂直方向按2：1占用
            child: Flex(
              direction: Axis.vertical,
              children: [
                Expanded(
                  flex: 2,
                    child: Container(height: 30,color: Colors.red,)),
                Spacer(flex: 1,),
                Expanded(
                    flex: 1,
                    child: Container(height: 30,color: Colors.green,))
              ],
            ),
          ),

        ),



      ],
      ),
    );
  }
}

